<template>
  <view class="container">
    <view class="column" v-for="(column, index) in columns" :key="index">
      <view class="item" v-for="item in column.items" :key="item.id" @click="goDetail(item)">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>{{ item.name }}</span>
            </div>
          </template>
          <el-image :src="item.image" fit="cover" class="image"></el-image>
          <div class="card-content">
            <p class="price">￥{{ item.price }}</p>
            <p class="desc">{{ item.description }}</p>
            <p class="specs">口味：{{ item.specs.find(spec => spec.key === '口味')?.value }}</p>
            <p class="specs">重量：{{ item.specs.find(spec => spec.key === '重量')?.value }}</p>
            <p class="specs">保质期：{{ item.specs.find(spec => spec.key === '保质期')?.value }}</p>
            <p class="specs">产地：{{ item.specs.find(spec => spec.key === '产地')?.value }}</p>
          </div>
        </el-card>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      goodsList: [
        {
          id: 1,
          name: "经典裹蒸粽（豆沙粽）",
          image: "https://img.alicdn.com/bao/uploaded/i4/2485526940/O1CN01jZekDa218ZRBoNyyB_!!0-item_pic.jpg",
          price: 25.00,
          original_price: 30.00,
          discount: "8.3折",
          stock: {
            quantity: 200,
            status: "有货"
          },
          description: "精选优质糯米，搭配细腻豆沙馅，口感软糯，甜而不腻。传统手工制作，保留了粽子的原始风味。",
          specs: [
            { key: "口味", value: "豆沙" },
            { key: "重量", value: "50g/个" },
            { key: "包装", value: "真空包装" },
            { key: "保质期", value: "6个月" },
            { key: "产地", value: "广东肇庆" }
          ],
          reviews: {
            total: 500,
            good_rate: 95.0,
            sample: ["粽子口感很好，豆沙馅很甜！", "包装很严实，粽子很新鲜。"]
          },
          brand: "传统美食坊",
          category: "食品>粽子"
        },
        {
          id: 2,
          name: "五香裹蒸粽（咸肉粽）",
          image: "https://tse1-mm.cn.bing.net/th/id/OIP-C.ZDq4xjD-6EIUpLK92KEPVwHaHa?cb=iwc2&rs=1&pid=ImgDetMain",
          price: 30.00,
          original_price: 35.00,
          discount: "8.6折",
          stock: {
            quantity: 150,
            status: "有货"
          },
          description: "采用优质糯米和精选五花肉，搭配香菇、咸蛋黄等配料，经过传统工艺制作，肉香浓郁，口感丰富。",
          specs: [
            { key: "口味", value: "咸肉" },
            { key: "重量", value: "60g/个" },
            { key: "包装", value: "真空包装" },
            { key: "保质期", value: "6个月" },
            { key: "产地", value: "广东肇庆" }
          ],
          reviews: {
            total: 400,
            good_rate: 94.0,
            sample: ["咸肉粽很好吃，肉很香！", "粽子的口感很扎实，配料丰富。"]
          },
          brand: "传统美食坊",
          category: "食品>粽子"
        },
        {
          id: 3,
          name: "裹蒸粽（碱水粽）",
          image: "https://img.alicdn.com/i3/2206460867747/O1CN01UK4MiC276B2Xz85qJ_!!2206460867747.jpg",
          price: 20.00,
          original_price: 25.00,
          discount: "8.0折",
          stock: {
            quantity: 300,
            status: "有货"
          },
          description: "碱水粽是广东特色粽子，采用糯米和食用碱水制作，口感软糯，带有独特的碱水香味，适合搭配糖水食用。",
          specs: [
            { key: "口味", value: "碱水" },
            { key: "重量", value: "45g/个" },
            { key: "包装", value: "真空包装" },
            { key: "保质期", value: "5个月" },
            { key: "产地", value: "广东肇庆" }
          ],
          reviews: {
            total: 300,
            good_rate: 96.0,
            sample: ["碱水粽很有特色，味道很好！", "适合搭配糖水一起吃。"]
          },
          brand: "传统美食坊",
          category: "食品>粽子"
        },
        {
          id: 4,
          name: "裹蒸粽（八宝粽）",
          image: "https://pic.nximg.cn/file/20220104/9852054_164240977100_2.jpg",
          price: 35.00,
          original_price: 40.00,
          discount: "8.8折",
          stock: {
            quantity: 100,
            status: "有货"
          },
          description: "八宝粽是传统粽子的升级版，内含花生、红豆、绿豆、薏仁、莲子等多种食材，营养丰富，口感层次分明。",
          specs: [
            { key: "口味", value: "八宝" },
            { key: "重量", value: "70g/个" },
            { key: "包装", value: "真空包装" },
            { key: "保质期", value: "6个月" },
            { key: "产地", value: "广东肇庆" }
          ],
          reviews: {
            total: 200,
            good_rate: 97.0,
            sample: ["八宝粽的配料很丰富，很好吃！", "口感很扎实，食材新鲜。"]
          },
          brand: "传统美食坊",
          category: "食品>粽子"
        },
        {
          id: 5,
          name: "裹蒸粽（蛋黄肉粽）",
          image: "https://img.alicdn.com/bao/uploaded/i1/2200667102488/O1CN01vVMHMt1UFYGH5MI4J_!!0-item_pic.jpg_500x500q90.jpg",
          price: 32.00,
          original_price: 38.00,
          discount: "8.4折",
          stock: {
            quantity: 120,
            status: "有货"
          },
          description: "蛋黄肉粽是经典口味之一，采用优质糯米、咸蛋黄和五花肉，搭配香菇、花生等配料，口感丰富，咸香适口。",
          specs: [
            { key: "口味", value: "蛋黄肉" },
            { key: "重量", value: "65g/个" },
            { key: "包装", value: "真空包装" },
            { key: "保质期", value: "6个月" },
            { key: "产地", value: "广东肇庆" }
          ],
          reviews: {
            total: 250,
            good_rate: 95.5,
            sample: ["蛋黄肉粽很好吃，蛋黄很香！", "粽子的口感很扎实，配料丰富。"]
          },
          brand: "传统美食坊",
          category: "食品>粽子"
        }
      ],
      columns: [
        { items: [] },
        { items: [] }
      ]
    };
  },
  methods: {
	 goDetail(item) {
	      // 通过 URL 参数传递商品 ID
	      uni.navigateTo({
	        url: `/pages/mall/goodsDetail?id=${item.id}`
	      });
	    },
    divideColumns() {
      this.goodsList.forEach((item, index) => {
        if (index % 2 === 0) {
          this.columns[0].items.push(item);
        } else {
          this.columns[1].items.push(item);
        }
      });
    }
  },
  mounted() {
    this.divideColumns();
  }
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.column {
  width: 49%; /* 两列布局 */
  margin-bottom: 10px;
}
.item {
  margin-bottom: 10px;
}
.box-card {
  width: 100%;
}
.image {
  width: 100%;
  object-fit: cover; /* 确保图片完全覆盖容器 */
}
.card-content {
  text-align: center;
}
.price {
  font-size: 18px;
  color: red;
}
.desc {
  font-size: 14px;
  color: #666;
}
.specs {
  font-size: 12px;
  color: #999;
}
</style>